<template>
    <div>
        <!-- 点菜前判断 -->
        <el-dialog
            title="开 台"
            :visible.sync="judgeBeforeOrder"
            width="30%"
            >
                <ul class="formBox">
                    <li class="formItem">
                        <label for="">就餐人数：</label><input type="text" placeholder="请输入就餐人数">
                    </li>
                    <li class="formItem">
                        <label for="">就餐桌号：</label><input type="text" placeholder="请输入就餐桌号">
                    </li>
                    <li class="formItem">
                        <label for="">备注：</label><input type="text">
                    </li>
                    <li class="formItem">
                        <button @click="createInitOrder()">开始选菜</button> 
                        <button @click="quitBeforeOrder()">取消</button>
                    </li>
                </ul>
        </el-dialog>
        <!-- 已有订单，验证桌号 -->
        <el-dialog
            title="验证台号"
            :visible.sync="existOrder"
            width="30%">
            <ul class="formBox">
                <li class="formItem">
                    <label for="">台号：</label><input type="text" placeholder="请输入台号">
                </li>
                <li class="formItem">
                        <button @click="verifyTable()">查看订单</button> 
                        <button @click="quitVerifyTable()">取消</button>
                </li>
            </ul>
        </el-dialog> 
        <!-- 点击下单弹框 -->
        <el-dialog
            title="订单"
            :visible.sync="showOrder"
            width="30%">
                <ul class="formBox">
                    <li class="formItem">
                        <label for="">就餐人数：</label><input type="text" placeholder="请输入就餐人数">
                    </li>
                    <li class="formItem">
                        <label for="">就餐桌号：</label><input type="text" placeholder="请输入就餐桌号">
                    </li>
                    <li class="formItem">
                        <ul class="formDishBox" v-for="(item,indix) in currentData">
                            <li class="formDishItem">
                                <label for="">{{item.name}}：</label>
                                <span> <i>单价:</i> {{item.price}}</span>
                                <span> <i>数量：</i>100</span>
                            </li>
                        </ul>
                    </li>
                    
                    <li class="formItem">
                        <label for="">备注：</label><input type="text">
                    </li>
                    <li class="formItem">
                        <label for="">下单时间：</label><input type="text">
                    </li>
                    <li class="formItem">
                        <label for="">合计：</label><input type="text">
                    </li>
                    <li class="formItem">
                        <button @click="savaOrder()">确认下单</button> 
                        <button @click="quitShowOrder()">取消</button>
                    </li>
                </ul>
        </el-dialog>
        <!-- 页面搜索功能 -->
        <div class="searchBox">
            <input type="text" class="dishName" v-model="dishName">
            <!-- <select name="" id="" class="searchType" v-model="dishType" @change="searchType()" placeholder = '请选择菜品类型'>
                <option value="" disabled selected hidden >请选择菜品类型</option>
                <option >水果</option>
                <option>蔬菜</option>
                <option >小吃</option>
                <option >甜点</option>
            </select> -->
            <diySelect :optionData="optionData" @choose="choose" size="mini" class="searchType"></diySelect>
            <button class="searchBtn" @click = "searchName()">搜索</button>
            <div class="btnBox">
                <button class="performace" v-show="!initOrder" @click="performace()">开台</button>
                <button class="placeOrder" v-show="initOrder" @click="placeOrder()">下单</button>
                <button class="existOrder" v-show="!initOrder" @click="hasOrder()">已有订单</button>
            </div>
            
        </div>
        <!-- 页面渲染选菜界面 -->
        <el-row>
            <el-col :span="6"  v-for="(item,index) in currentData" :key = 'index' class="dishBox">
                <div class="dishDisplay">
                    <div class="dishImg"></div>
                    <div class="dishName">{{item.type}}:{{item.name}}</div>
                    <div class="dishOperate">
                        <div class="dishPrice"></div>
                        <div class="dishOperate"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="paging"><paging :obj = 'pagingData' ></paging></div>
        
        <!-- <editBtn></editBtn>
        <hr>
        <rechartBtn></rechartBtn>
        <hr>
        <paging :obj = 'pagingData'></paging>
        <hr> -->  
        <!-- <headerComponent></headerComponent> -->
    </div>
</template>
<script>
    export default {
        name: "tableOrderPage",
        components:{
        },
        data(){
            var that =  this
            return{
                judgeBeforeOrder:false,//控制开台弹框
                existOrder:false,//控制已有订单弹框
                initOrder:false,//控制下单按钮显示以及开台和已有订单按钮的隐藏
                showOrder:false,//控制订单的显示
                currentPage:1,
                row:8,
                dishName:'',
                dishType:'',
                dishData:
                [
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'香蕉',type:'水果',price:55},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'梨子',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'西瓜',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'芒果',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'黄瓜',type:'蔬菜',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'香蕉',type:'水果',price:55},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'梨子',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'西瓜',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'芒果',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'黄瓜',type:'蔬菜',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'香蕉',type:'水果',price:55},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'梨子',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'西瓜',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'芒果',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'黄瓜',type:'蔬菜',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'香蕉',type:'水果',price:55},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'梨子',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'西瓜',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'芒果',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'黄瓜',type:'蔬菜',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'香蕉',type:'水果',price:55},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'梨子',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'西瓜',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'芒果',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'黄瓜',type:'蔬菜',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'香蕉',type:'水果',price:55},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'梨子',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'西瓜',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'芒果',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'黄瓜',type:'蔬菜',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'香蕉',type:'水果',price:55},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'梨子',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'西瓜',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'芒果',type:'水果',price:65},
                    {name:'西红柿',type:'蔬菜',price:65},
                    {name:'黄瓜',type:'蔬菜',price:65},
                ],
                optionData:
                [
                    {
                        value:1,
                        label:'水果'
                    },
                    {
                        value:2,
                        label:'蔬菜'
                    },
                    {
                        value:3,
                        label:'甜点'
                    },
                    {
                        value:4,
                        label:'小吃'
                    },
                ]
            }
        },
        computed:{
            currentData(){
                let data = [];
                data = this.dishData.slice((this.currentPage-1)*this.row,this.currentPage*this.row);
                return data;
            },
            pagingData(){
                var that = this;
                let data = {
                    pageSize:this.row,//一页展示几条数据
                    pageCount:5,//超过多少页打点省略
                    currentChange(num){   
                        that.currentPage = num//改变当前页
                    },
                    total:this.dishData.length,//一共有几条数据
                }
                return data 
            }


        },
        methods:{
            // 按名字搜索
            searchName(){
                if(this.dishName !== ''){
                    console.log(this.dishName,9999)
                    console.log(this.$store)
                    let obj = {
                        diashName:this.dishName,
                        row:this.row,
                        currentPage:this.currentPage,
                        }
                    this.$store.dispatch('searchDishName',obj).
                    then() 

                }
                
            },
            // 按类型搜索
            searchType(){
                console.log(this.dishType,777)
                let obj = {
                        dishType:this.dishType,
                        row:this.row,
                        currentPage:this.currentPage,
                        }
                this.$store.dispatch('searchDishType',obj).
                then()
            },
            choose(val){
                console.log(val)
            },
            // 开台
            performace(){
                this.judgeBeforeOrder = true;

            },
            // 已有订单
            hasOrder(){
                this.existOrder = true;
            },
            // 开始点菜,初始化订单
            createInitOrder(){
                this.judgeBeforeOrder = false;
                this.initOrder = true;
            },
            // 退出点单前判断
            quitBeforeOrder(){
                this.judgeBeforeOrder = false;
            },
            // 验证桌号
            verifyTable(){
                this.existOrder = false;
                this.initOrder = true;
            },
            // 退出验证桌号
            quitVerifyTable(){
                this.existOrder = false;
            },
            // 下单
            placeOrder(){
                this.showOrder = true;

                // this.$router.push({name:'goodsDetail',params:{id}});
                // this.$router.push('showDishOrder')
            },
            quitShowOrder(){
                this.showOrder = false
            },
            savaOrder(){

            },

        },
        created(){
            this.judgeBeforeOrder = false
             let obj = {
                        row:this.row,
                        currentPage:this.currentPage,
                        }
            this.$store.dispatch('getDishData',obj)
        },
        
    }
</script>

<style scoped lang = 'less'>
    html,body{
        width: 100%;
        height: 100%;
    }
    hr{
        height: 5px;
        background: yellow;
    }
    .formBox{
        list-style: none;
        border: 1px solid #fff;
        padding: 0;
        .formItem{
            margin-top: 10px;
            text-align: center;
            label{
                display: inline-block;
                width: 80px;
                background: deepskyblue;
                color: #fff;
                text-align: right;
                line-height: 30px;
                margin-right: 10px;
            }
            input{
                width: 150px;
                outline: none;
                text-indent: 5px;
                height: 30px;
                line-height: 30px;
                padding: 0;
                border: none;
                font-size: 14px;
            }
            button{
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                margin-left: 10px;
                margin-top: 30px;
            }
        }
        .formDishBox{
            list-style: none;
            padding: 0;
            .formDishItem{
                margin-top: 10px;
                span{
                    display: inline-block;
                    width: 70px;
                    margin-left: 10px;
                    background: paleturquoise;
                }
            }
        }
    }
    .modal{
        width: 100%;
        height: 100%;
        background: #008c8c;
    }
    .searchBox{
        height: 30px;
        background: orangered;
        .dishName{
            float: left;
            width: 150px;
            height: 30px;
            border: none;
            padding: 0;
            text-indent: 10px;
            margin-left: 10px;
        }
        .searchType{
            float: left;
            width: 150px;
            height: 30px;
            margin-left: 10px;
        }
        .searchBtn{
            float: left;
            width: 100px;
            height: 30px;
            margin-left: 10px;
            border: none;
            outline: none;
            cursor: pointer;
        }
        .btnBox{
            float: right;
            width: 230px;
            height: 30px;
            margin-right: 10px;
            background: crimson;
            position: relative;
            .placeOrder,.performace,.existOrder{
                width: 100px;
                position: absolute;
                height: 30px;
                text-align: center;
                line-height: 30px;
            }
            .performace{
                left: 10px;
            }
            .placeOrder{
                left: 115px;
                margin-left: -50px;
            }
            .existOrder{
                right: 10px;
            }
        }
    }
    .dishBox{
        box-sizing: border-box;
        padding: 10px;
        .dishDisplay{
        width: 200px;
        height: 200px;
        background: #008c8c;
        position: relative;
        box-shadow: 0px 5px  20px #008c8c;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        .dishImg{
            width: 140px;
            height: 140px;
            background: yellow;
            position: absolute;
            top: 0;
            left: 100px;
            margin-left: -70px;
        }
        .dishName{
            width: 200px;
            height: 30px;
            background: tomato;
            position: absolute;
            bottom: 30px;
            text-align: center;
            line-height: 30px;
        }
        .dishOperate{
            width: 200px;
            height: 30px;
            background: deepskyblue;
            position: absolute;
            bottom: 0;
            text-align: center;
            line-height: 30px;
        }
        }
    }
    .paging{
        margin-top: 30px;
        text-align: center;
    }
    
</style>